<!--
 * @Date: 2023-11-17 11:44:58
 * @LastEditTime: 2023-11-30 18:08:33
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="道具卡"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="$c.back"
    ></uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="card-item" v-for="(item, i) in listData" :key="i">
        <view class="icon">
          <image :src="$img('/static/img2/cc151.png')" lazy-load></image>
        </view>

        <view class="card-r">
          <view class="title">{{ item.title }}</view>

          <view class="desc">抽赏时可选择重新抽赏</view>
        </view>

        <!-- <view class="card-num">×233</view> -->
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: []
    }
  },

  methods: {
    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'item_card_list',
        data: {
          page: num
        },

        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)

            // this.listData = [
            //   {
            //     title: '正正正正'
            //   },
            //   {
            //     title: '正正正正'
            //   },
            //   {
            //     title: '正正正正'
            //   }
            // ]
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  .card-item {
    width: 690rpx;
    margin: 20rpx auto 0;
    box-sizing: border-box;
    padding: 30rpx 30rpx;
    display: flex;
    align-items: center;
    background: #252525;
    border: 2rpx solid #444444;

    .icon {
      width: 70rpx;
      height: 40rpx;
    }

    .card-r {
      width: 300rpx;
      box-sizing: border-box;
      padding-left: 30rpx;
      margin-left: 30rpx;
      border-left: 1rpx solid #555;

      .title {
        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }

      .desc {
        margin-top: 10rpx;
        word-wrap: break-word;
        word-break: break-all;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #ffffff;
      }
    }

    .card-num {
      flex: 1;
      text-align: right;

      font-size: 30rpx;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .common_bg {
  }
}
</style>
